<script setup>
import {ref, reactive, onMounted, computed} from "vue";
import { useRouter, useRoute } from "vue-router";
import {teamPageQueryUser} from "@/services/pageQuery/TeamPageQuery.js";
import {getCurrentUser} from "@/services/user.js";
import myAxios from "@/plugins/myAxios.js";
import {Toast} from "vant";
const searchText = ref("");
const router = useRouter();
const route = useRoute();
// activeId为已选择中的标签Id，activeIndex为当前标签分类，
const activeIds = ref([]);
const activeIndex = ref(0);
// tagList为标签列表
// const originTagList = ref([
//   {
//     text: "性别",
//     children: [
//       { text: "男", id: "男" },
//       { text: "女", id: "女" },
//     ],
//   },
//   {
//     text: "方向",
//     children: [
//       { text: "Java", id: "Java" },
//       { text: "C++", id: "C++" },
//       { text: "Python", id: "Python" },
//       { text: "Go", id: "Go" },
//       { text: "PHP", id: "PHP" },
//       { text: "前端", id: "前端" },
//       { text: "安卓", id: "安卓" },
//     ],
//   },
// ])
const originTagList = ref([])

let tagList = ref([]);

onMounted(async () => {
  myAxios
      .get("/tagClassification/getClassVoList")
      .then((res) => {
        if (res.data.code == 1) {
          originTagList.value = res.data?.data;
          tagList.value = JSON.parse(JSON.stringify(originTagList.value));
          console.log("/tagClassification/getClassVoList 标签获取成功");
        } else {
          console.error("/tagClassification/getClassVoList 标签获取失败:" + res.data.msg);
        }
      })
});
// 移除标签
const close = (tag) => {
    activeIds.value = activeIds.value.filter((item) => {
        return item !== tag;
    });
};
// 搜索框JS
const onCancel = () => (searchText.value = "");
const onSearch = () => {
    tagList.value = JSON.parse(JSON.stringify(originTagList.value)).map((category) => {
        category.children = category.children.filter((tag) =>
            tag.text.includes(searchText.value)
        );
        return category
    });
};
// 路由挑战搜索结果页
const toSearchResultPage = () => {
    router.push({
        path: "/inter/user/list",
        query: {
            tags: activeIds.value
        }
    })
}
</script>
<template>
    <form action="/">
        <van-search
            v-model="searchText"
            show-action
            placeholder="请输入标签"
            @search="onSearch"
            @cancel="onCancel"
        />

        <van-divider>已选标签</van-divider>
        <div v-if="activeIds.length === 0" style="text-align: center">
            请选择标签
        </div>
        <van-row gutter="15" style="padding: 0 5vw">
            <van-col v-for="tag in activeIds" style="margin-bottom: 10px">
                <van-tag
                    closeable
                    size="medium"
                    type="primary"
                    @close="close(tag)"
                >
                    {{ tag }}
                </van-tag>
            </van-col>
        </van-row>

        <van-divider>选择标签</van-divider>

        <van-tree-select
            v-model:active-id="activeIds"
            v-model:main-active-index="activeIndex"
            :items="tagList"
        />
    </form>
    <div style="padding: 15px 24px;">
        <van-button block type="primary" @click="toSearchResultPage">搜索伙伴</van-button>
    </div>
</template>
<style scoped lang="scss"></style>
